@extends('admin.base')
<!--财务列表-->
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" name="mobile" id="mobile" placeholder="用户手机号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="start_time" id="start_time" placeholder="开始时间" value="">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="end_time" id="end_time" placeholder="截止时间" value="">
                </div>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" id="type">
                        <option value="">全部</option>
                        <option value="1">入账</option>
                        <option value="2">出账</option>
                    </select>
                </div>
                <button class="layui-btn" id="searchBtn">搜 索</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('flow.detail')
                        @{{# if(d.type != 3) { }}
                        <a class="layui-btn layui-btn-sm" lay-event="detail">查看详情</a>
                        @{{# } }}
                    @endcan
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer', 'table', 'form','laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            laydate.render({elem:'#start_time',type:'datetime'});
            laydate.render({elem:'#end_time',type:'datetime'});
            //财务表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                , autoSort: false
                , height: 'auto'
                , url: "{{ route('flow.data') }}"
                , where: {
                    mobile: $("#mobile").val(),
                    start_time: $("#start_time").val(),
                    end_time: $("#end_time").val(),
                    type: $("#type").val(),
                }
                , page: true //开启分页
                ,limit: 30
                ,fixed: true
                , cols: [[ //表头
                    {field: 'id', title: 'ID',width: 100}
                    , {field:'money',title:'金额',templet:function (d) {
                            if(d.type == '1') {//订单
                                return '+' + d.money;
                            }else if(d.type == '3'){//提现
                                return '-' + d.money;
                            }
                            return '&nbsp;&nbsp;' +d.money;
                        },width: 100}
                    , {field: 'mobile', title: '用户手机号',width: 200}
                    , {field: 'openid',title: '微信号',width: 300}
                    , {field: '类型', title: '类型',templet:function (d) {
                        switch (d.type) {
                                case '1':
                                    return '订单';
                                    break;
                                case '2':
                                    return '分润';
                                    break;
                                case '3':
                                    return '提现';
                                    break;
                                case '4':
                                    return '退款';
                                    break;
                                default:
                                    return '未知';
                                    break;
                            }
                    }}
                    , {field: 'created_at', title: '时间',templet:function (d) {
                            return d.created_at.substr(0,16);
                        }}
                    , {field: 'status',title: "状态"}
                    , {'title': '操作', align: 'center', toolbar: '#options'}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                let loading;
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值

                console.log(data)

                if (layEvent === 'detail') {//查看详情
                    //组装弹窗标题
                    var title = '详情';
                    if (data.type == 1) {
                        title = '订单' + title
                    } else if (data.type == 2) {
                        title = '分润' + title
                    } else if (data.type == 3) {
                        title = '提现' + title
                    }
                    var top = '100px';
                    switch (data.type) {
                        case "1"://查看订单
                            loading = layer.load();
                            //获取订单的商品信息等
                            $.ajax({
                                url: "/order/detail/" + data.business_id,
                                dataType: "json",
                                success: function (res) {
                                    layer.close(loading)

                                    $("#orderDetail .mobile").html(data.mobile);
                                    $("#orderDetail .orderNo").html(res.no);
                                    $("#orderDetail .product").html(res.product.title);
                                    $("#orderDetail .sku").html(res.sku.title);
                                    $("#orderDetail .num").html(res.num);
                                    $("#orderDetail .totalFee").html(res.total_fee / 100);

                                    table.render({
                                        elem: "#rebateList"
                                        , cols: [[
                                            {
                                                field: "level", title: "关系链", templet: function (d) {
                                                    if (d.level == 1) {
                                                        return "上级";
                                                    } else if (d.level == 2) {
                                                        return "上上级";
                                                    } else {
                                                        return "未知";
                                                    }
                                                }
                                            },
                                            {field: "mobile", title: "手机号"},
                                            {
                                                field: "rate", title: "比例", templet: function (d) {
                                                    if (d.level == 1) {
                                                        return res.product.p_rate + ' %';
                                                    } else if (d.level == 2) {
                                                        return res.product.p_p_rate + ' %';
                                                    } else {
                                                        return "未知";
                                                    }
                                                }
                                            },
                                            {field: "money", title: "金额"}
                                        ]]
                                        , data: res.rebates
                                    })
                                    layer.open({
                                        title: title,
                                        content: $('#orderDetail').html(),
                                        area: "700px",
                                        offset: top
                                    })
                                }
                            });
                            break;
                        case "2"://查看分润
                            loading = layer.load();
                            //获取订单的商品信息等
                            $.ajax({
                                url: "/rebate/detail/" + data.business_id,
                                dataType: "json",
                                success: function (res) {
                                    layer.close(loading)

                                    $("#rebateDetail .mobile").html(data.mobile);
                                    $("#rebateDetail .orderNo").html(res.order.no);
                                    $("#rebateDetail .product").html(res.order.product.title);
                                    $("#rebateDetail .sku").html(res.order.sku.title);
                                    $("#rebateDetail .num").html(res.order.num);
                                    $("#rebateDetail .totalFee").html(res.order.total_fee/100);
                                    if (res.level == 1) {
                                        $("#rebateDetail .level").html("上级");
                                        $("#rebateDetail .rate").html(res.order.product.p_rate + ' %');
                                    }else if (res.level == 2) {
                                        $("#rebateDetail .level").html("上上级");
                                        $("#rebateDetail .rate").html(res.order.product.p_p_rate + ' %');
                                    }else {
                                        $("#rebateDetail .level").html("未知");
                                    }
                                    layer.open({
                                        title: title,
                                        content: $('#rebateDetail').html(),
                                        area: "700px",
                                        offset: top
                                    })
                                }
                            });
                            break;
                        case "3"://查看提现
                            break;
                        default:
                            return ;
                    }
                }
            });

            //行单击事件,当前行添加额外样式
            table.on('row(dataTable)',function (obj) {
                $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
                $(obj.tr.selector).attr({"style":"background:#dbefdb"});//改变当前tr颜色
            })
            //搜索
            $("#searchBtn").click(function () {
                var mobile = $("#mobile").val();
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                var type = $("#type").val();
                dataTable.reload({
                    where: {mobile: mobile, start_time: start_time, end_time: end_time,type: type},
                    page: {curr: 1}
                })
            })
        })
    </script>
    <style>
        /*表格内容高度自适应*/
        .layui-table-cell {
            height: auto;
        }
    </style>
@endsection
{{--订单详情--}}
<div id="orderDetail" style="display: none">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收件手机号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux mobile"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux orderNo"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买商品</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux product"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">规格型号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux sku"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux num"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">支付总额</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux totalFee"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分润详情</label>
            <div class="layui-input-block">
                <div style="width: 500px;">
                    <table id="rebateList" lay-filter="rebateList"></table>
                </div>
            </div>
        </div>
    </form>
</div>
{{--分润详情--}}
<div id="rebateDetail" style="display: none">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux orderNo"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">支付手机号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux mobile"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买商品</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux product"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">规格型号</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux sku"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux num"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">支付总额</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux totalFee"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">关系链</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux level"></div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分润比例</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid layui-word-aux rate"></div>
                </div>
            </div>
        </div>
    </form>
</div>
